<template>
  父组件
  <template v-for="item in names" :key="item">
    <button @click="btnClick(item)" :class="{ active: currentName === item }">{{ item }}</button>
  </template>
  <hr />
  <!-- 组件切换时不会被销毁，保存之前的状态 -->
  <!-- include 匹配的组件被缓存  此时匹配组件的name属性-->
  <!-- exclude 匹配的组价不被缓存 此时匹配组件的name属性 -->
  <!-- max 最大缓存组件数量，最近没被访问的组件会被销毁 -->
  <keep-alive exclude='Home'>
    <component :is="currentName" :currentName="currentName" />
  </keep-alive>
</template>

<script>
import Home from './pages/home.vue'
import About from './pages/about.vue'
import Mime from './pages/mime.vue'

export default {
  components: { Home, About, Mime },
  data() {
    return {
      names: ['Home', 'About', 'Mime'],
      currentName: 'Home',
    }
  },
  methods: {
    btnClick(name) {
      this.currentName = name
    },
  },
}
</script>

<style scoped>
.active {
  background-color: pink;
}
</style>
